<template>
  <div class="app-container home">
    <!-- 页面标题区域 -->
    <div class="page-header">
      <h1 class="page-title">论文首页（林钰浈）</h1>
      <p class="page-subtitle">学术成果管理与展示平台</p>
    </div>

    <el-row :gutter="20">
      <!-- 用户个人信息模块 -->
      <el-col :span="24">
        <el-card class="user-info-card" shadow="hover">
          <div slot="header" class="card-header">
            <div class="header-left">
              <i class="el-icon-user-solid header-icon"></i>
              <span class="header-title">个人信息</span>
            </div>
            <el-button class="header-btn" type="primary" icon="el-icon-edit" size="mini" @click="handleEditProfile">编辑</el-button>
          </div>
          <div class="user-profile">
            <div class="user-avatar-wrapper">
              <div class="user-avatar">
                <img :src="userInfo.avatar" alt="用户头像">
                <div class="avatar-border"></div>
              </div>
              <div class="user-status">
                <span class="status-dot"></span>
                <span class="status-text">在线</span>
              </div>
            </div>
            <div class="user-details">
              <h2>{{ userInfo.nickName || userInfo.name }}</h2>
              <div class="user-tags">
                <el-tag v-if="userInfo.dept" type="primary" size="small">{{ userInfo.dept }}</el-tag>
                <el-tag v-if="userInfo.roles && userInfo.roles.length > 0" type="success" size="small">{{ userInfo.roles.join(', ') }}</el-tag>
              </div>
              <div class="info-grid">
                <div class="info-item">
                  <i class="el-icon-user info-icon"></i>
                  <div class="info-content">
                    <span class="info-label">用户名</span>
                    <span class="info-value">{{ userInfo.name }}</span>
                  </div>
                </div>
                <div class="info-item">
                  <i class="el-icon-message info-icon"></i>
                  <div class="info-content">
                    <span class="info-label">邮箱</span>
                    <span class="info-value">{{ userInfo.email || '暂未设置' }}</span>
                  </div>
                </div>
                <div class="info-item">
                  <i class="el-icon-phone info-icon"></i>
                  <div class="info-content">
                    <span class="info-label">电话</span>
                    <span class="info-value">{{ userInfo.phone || '暂未设置' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px">
      <!-- 论文信息模块 -->
      <el-col :span="12">
        <el-card class="paper-info-card" shadow="hover">
          <div slot="header" class="card-header">
            <div class="header-left">
              <i class="el-icon-document-checked header-icon"></i>
              <span class="header-title">论文信息</span>
              <el-badge :value="paperList.length" class="header-badge" type="primary" />
            </div>
            <el-button class="header-btn" type="primary" icon="el-icon-plus" size="mini" @click="handleAddPaper">添加</el-button>
          </div>
          <div class="paper-list" v-if="paperList.length > 0">
            <div v-for="(paper, index) in paperList" :key="index" class="paper-item" @click="viewPaper(paper)">
              <div class="paper-header">
                <h4 class="paper-title">{{ paper.title }}</h4>
                <div class="paper-actions">
                  <el-button size="mini" type="primary" icon="el-icon-view" circle @click.stop="viewPaper(paper)"></el-button>
                  <el-button size="mini" type="success" icon="el-icon-edit" circle @click.stop="editPaper(paper)"></el-button>
                  <el-button size="mini" type="danger" icon="el-icon-delete" circle @click.stop="deletePaper(paper)"></el-button>
                </div>
              </div>
              <div class="paper-meta">
                <div class="meta-item">
                  <i class="el-icon-date"></i>
                  <span>{{ paper.publishDate }}</span>
                </div>
                <div class="meta-item">
                  <i class="el-icon-collection-tag"></i>
                  <span>{{ paper.journal }}</span>
                </div>
              </div>
              <div class="paper-footer">
                <div class="author-info">
                  <i class="el-icon-user"></i>
                  <span>{{ paper.authors }}</span>
                </div>
                <div class="citation-info">
                  <i class="el-icon-star-on"></i>
                  <span>{{ paper.citations }} 次引用</span>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="empty-data">
            <i class="el-icon-document-remove empty-icon"></i>
            <p class="empty-text">暂无论文信息</p>
            <el-button type="primary" icon="el-icon-plus" @click="handleAddPaper">添加第一篇论文</el-button>
          </div>
        </el-card>
      </el-col>

      <!-- 论文结论模块 -->
      <el-col :span="12">
        <el-card class="paper-conclusion-card" shadow="hover">
          <div slot="header" class="card-header">
            <div class="header-left">
              <i class="el-icon-edit-outline header-icon"></i>
              <span class="header-title">论文结论</span>
              <el-badge :value="conclusionList.length" class="header-badge" type="success" />
            </div>
            <el-button class="header-btn" type="success" icon="el-icon-plus" size="mini" @click="handleAddConclusion">添加</el-button>
          </div>
          <div class="conclusion-list" v-if="conclusionList.length > 0">
            <div v-for="(conclusion, index) in conclusionList" :key="index" class="conclusion-item" @click="viewConclusion(conclusion)">
              <div class="conclusion-header">
                <h4 class="conclusion-title">{{ conclusion.title }}</h4>
                <div class="conclusion-actions">
                  <el-button size="mini" type="primary" icon="el-icon-view" circle @click.stop="viewConclusion(conclusion)"></el-button>
                  <el-button size="mini" type="success" icon="el-icon-edit" circle @click.stop="editConclusion(conclusion)"></el-button>
                  <el-button size="mini" type="danger" icon="el-icon-delete" circle @click.stop="deleteConclusion(conclusion)"></el-button>
                </div>
              </div>
              <div class="conclusion-content">{{ conclusion.content }}</div>
              <div class="conclusion-footer">
                <div class="create-time">
                  <i class="el-icon-time"></i>
                  <span>{{ conclusion.createTime }}</span>
                </div>
              </div>
            </div>
          </div>
          <div v-else class="empty-data">
            <i class="el-icon-edit-outline empty-icon"></i>
            <p class="empty-text">暂无论文结论</p>
            <el-button type="success" icon="el-icon-plus" @click="handleAddConclusion">添加第一个结论</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 论文信息对话框 -->
    <el-dialog :title="paperDialogTitle" :visible.sync="paperDialogVisible" width="50%" :close-on-click-modal="false">
      <el-form :model="paperForm" label-width="100px">
        <el-form-item label="论文标题">
          <el-input v-model="paperForm.title" placeholder="请输入论文标题"></el-input>
        </el-form-item>
        <el-form-item label="发表时间">
          <el-date-picker
            v-model="paperForm.publishDate"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="期刊/会议">
          <el-input v-model="paperForm.journal" placeholder="请输入期刊或会议名称"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="paperForm.authors" placeholder="请输入作者，多个作者用逗号分隔"></el-input>
        </el-form-item>
        <el-form-item label="引用次数">
          <el-input-number v-model="paperForm.citations" :min="0" label="引用次数"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="paperDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="savePaper">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 论文结论对话框 -->
    <el-dialog :title="conclusionDialogTitle" :visible.sync="conclusionDialogVisible" width="50%" :close-on-click-modal="false">
      <el-form :model="conclusionForm" label-width="100px">
        <el-form-item label="结论标题">
          <el-input v-model="conclusionForm.title" placeholder="请输入结论标题"></el-input>
        </el-form-item>
        <el-form-item label="结论内容">
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入结论内容"
            v-model="conclusionForm.content">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="conclusionDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveConclusion">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserProfile } from '@/api/system/user'

export default {
  name: 'Dashboard',
  data() {
    return {
      // 用户信息
      userInfo: {
        name: '',
        nickName: '',
        email: '',
        phone: '',
        dept: '',
        avatar: '',
        roles: []
      },
      
      // 论文信息
      paperList: [],
      paperDialogVisible: false,
      paperDialogTitle: '添加论文',
      paperForm: {
        id: null,
        title: '',
        publishDate: '',
        journal: '',
        authors: '',
        citations: 0
      },
      
      // 论文结论
      conclusionList: [],
      conclusionDialogVisible: false,
      conclusionDialogTitle: '添加结论',
      conclusionForm: {
        id: null,
        title: '',
        content: '',
        createTime: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'nickName',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.getUserInfo()
    this.loadPaperList()
    this.loadConclusionList()
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      this.userInfo.name = this.name
      this.userInfo.nickName = this.nickName
      this.userInfo.avatar = this.avatar
      this.userInfo.roles = this.roles
      
      // 获取更详细的用户信息
      getUserProfile().then(response => {
        const user = response.data
        this.userInfo.email = user.email
        this.userInfo.phone = user.phonenumber
        this.userInfo.dept = user.dept?.deptName
      }).catch(() => {
        this.$message.error('获取用户信息失败')
      })
    },
    
    // 编辑个人信息
    handleEditProfile() {
      this.$router.push('/user/profile')
    },
    
    // 加载论文列表
    loadPaperList() {
      // 这里应该从后端API获取数据，现在使用模拟数据
      this.paperList = [
        {
          id: 1,
          title: '基于深度学习的图像识别技术研究',
          publishDate: '2023-05-15',
          journal: '计算机学报',
          authors: '张三, 李四, 王五',
          citations: 25
        },
        {
          id: 2,
          title: '自然语言处理在智能客服中的应用',
          publishDate: '2023-08-20',
          journal: '软件学报',
          authors: '赵六, 钱七',
          citations: 18
        }
      ]
    },
    
    // 添加论文
    handleAddPaper() {
      this.paperDialogTitle = '添加论文'
      this.paperForm = {
        id: null,
        title: '',
        publishDate: '',
        journal: '',
        authors: '',
        citations: 0
      }
      this.paperDialogVisible = true
    },
    
    // 查看论文
    viewPaper(paper) {
      this.$message.info(`查看论文: ${paper.title}`)
    },
    
    // 编辑论文
    editPaper(paper) {
      this.paperDialogTitle = '编辑论文'
      this.paperForm = { ...paper }
      this.paperDialogVisible = true
    },
    
    // 删除论文
    deletePaper(paper) {
      this.$confirm(`确定要删除论文"${paper.title}"吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里应该调用后端API删除数据
        const index = this.paperList.findIndex(item => item.id === paper.id)
        if (index !== -1) {
          this.paperList.splice(index, 1)
          this.$message.success('删除成功')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    
    // 保存论文
    savePaper() {
      if (!this.paperForm.title) {
        this.$message.error('请输入论文标题')
        return
      }
      
      if (this.paperForm.id) {
        // 编辑
        const index = this.paperList.findIndex(item => item.id === this.paperForm.id)
        if (index !== -1) {
          this.paperList.splice(index, 1, { ...this.paperForm })
          this.$message.success('修改成功')
        }
      } else {
        // 添加
        const newPaper = {
          ...this.paperForm,
          id: Date.now()
        }
        this.paperList.unshift(newPaper)
        this.$message.success('添加成功')
      }
      
      this.paperDialogVisible = false
    },
    
    // 加载结论列表
    loadConclusionList() {
      // 这里应该从后端API获取数据，现在使用模拟数据
      this.conclusionList = [
        {
          id: 1,
          title: '深度学习在图像识别中的优势',
          content: '通过实验证明，深度学习方法在图像识别任务中相比传统方法具有更高的准确率和更好的泛化能力。特别是在复杂场景下，深度学习模型能够提取更加抽象和有意义的特征。',
          createTime: '2023-06-10'
        },
        {
          id: 2,
          title: '自然语言处理技术的局限性',
          content: '尽管自然语言处理技术取得了显著进展，但在处理长距离依赖、理解上下文和推理方面仍存在挑战。未来的研究需要更加关注语义理解和常识推理能力的提升。',
          createTime: '2023-09-05'
        }
      ]
    },
    
    // 添加结论
    handleAddConclusion() {
      this.conclusionDialogTitle = '添加结论'
      this.conclusionForm = {
        id: null,
        title: '',
        content: '',
        createTime: ''
      }
      this.conclusionDialogVisible = true
    },
    
    // 查看结论
    viewConclusion(conclusion) {
      this.$message.info(`查看结论: ${conclusion.title}`)
    },
    
    // 编辑结论
    editConclusion(conclusion) {
      this.conclusionDialogTitle = '编辑结论'
      this.conclusionForm = { ...conclusion }
      this.conclusionDialogVisible = true
    },
    
    // 删除结论
    deleteConclusion(conclusion) {
      this.$confirm(`确定要删除结论"${conclusion.title}"吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里应该调用后端API删除数据
        const index = this.conclusionList.findIndex(item => item.id === conclusion.id)
        if (index !== -1) {
          this.conclusionList.splice(index, 1)
          this.$message.success('删除成功')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    
    // 保存结论
    saveConclusion() {
      if (!this.conclusionForm.title) {
        this.$message.error('请输入结论标题')
        return
      }
      
      if (!this.conclusionForm.content) {
        this.$message.error('请输入结论内容')
        return
      }
      
      if (this.conclusionForm.id) {
        // 编辑
        const index = this.conclusionList.findIndex(item => item.id === this.conclusionForm.id)
        if (index !== -1) {
          this.conclusionList.splice(index, 1, { 
            ...this.conclusionForm,
            createTime: this.conclusionForm.createTime || new Date().toISOString().split('T')[0]
          })
          this.$message.success('修改成功')
        }
      } else {
        // 添加
        const newConclusion = {
          ...this.conclusionForm,
          id: Date.now(),
          createTime: new Date().toISOString().split('T')[0]
        }
        this.conclusionList.unshift(newConclusion)
        this.$message.success('添加成功')
      }
      
      this.conclusionDialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
  min-height: calc(100vh - 84px);
  
  // 页面标题区域
  .page-header {
    margin-bottom: 30px;
    text-align: center;
    animation: fadeInDown 0.8s ease;
    
    .page-title {
      font-size: 32px;
      font-weight: 600;
      color: #2c3e50;
      margin: 0 0 10px 0;
      background: linear-gradient(90deg, #3498db, #2c3e50);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .page-subtitle {
      font-size: 16px;
      color: #7f8c8d;
      margin: 0;
      font-weight: 300;
    }
  }
  
  // 卡片通用样式
  .el-card {
    border-radius: 12px;
    border: none;
    overflow: hidden;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
    }
    
    ::v-deep .el-card__header {
      padding: 18px 20px;
      background: linear-gradient(90deg, #f8f9fa, #e9ecef);
      border-bottom: 1px solid #e9ecef;
    }
    
    ::v-deep .el-card__body {
      padding: 20px;
    }
  }
  
  // 卡片头部样式
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .header-left {
      display: flex;
      align-items: center;
      
      .header-icon {
        font-size: 18px;
        margin-right: 8px;
        color: #409eff;
      }
      
      .header-title {
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
      }
      
      .header-badge {
        margin-left: 10px;
      }
    }
    
    .header-btn {
      border-radius: 20px;
      font-weight: 500;
    }
  }
  
  // 用户信息卡片
  .user-info-card {
    margin-bottom: 20px;
    animation: fadeInUp 0.8s ease;
    
    .user-profile {
      display: flex;
      align-items: flex-start;
      
      .user-avatar-wrapper {
        position: relative;
        margin-right: 24px;
        
        .user-avatar {
          position: relative;
          width: 120px;
          height: 120px;
          border-radius: 50%;
          overflow: hidden;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          transition: all 0.3s ease;
          
          &:hover {
            transform: scale(1.05);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
          }
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          
          .avatar-border {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 3px solid #409eff;
            box-sizing: border-box;
            animation: rotate 20s linear infinite;
          }
        }
        
        .user-status {
          position: absolute;
          bottom: 5px;
          right: 5px;
          display: flex;
          align-items: center;
          background: rgba(255, 255, 255, 0.9);
          padding: 4px 8px;
          border-radius: 12px;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          
          .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #67c23a;
            margin-right: 4px;
            animation: pulse 2s infinite;
          }
          
          .status-text {
            font-size: 12px;
            color: #67c23a;
            font-weight: 500;
          }
        }
      }
      
      .user-details {
        flex: 1;
        
        h2 {
          margin-top: 0;
          margin-bottom: 16px;
          color: #2c3e50;
          font-size: 24px;
          font-weight: 600;
        }
        
        .user-tags {
          margin-bottom: 20px;
          
          .el-tag {
            margin-right: 8px;
            border-radius: 12px;
            font-weight: 500;
          }
        }
        
        .info-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 16px;
          
          .info-item {
            display: flex;
            align-items: center;
            padding: 12px;
            background: #f8f9fa;
            border-radius: 8px;
            transition: all 0.3s ease;
            
            &:hover {
              background: #e9ecef;
              transform: translateX(5px);
            }
            
            .info-icon {
              font-size: 18px;
              color: #409eff;
              margin-right: 12px;
            }
            
            .info-content {
              display: flex;
              flex-direction: column;
              
              .info-label {
                font-size: 12px;
                color: #909399;
                margin-bottom: 4px;
              }
              
              .info-value {
                font-size: 14px;
                color: #606266;
                font-weight: 500;
              }
            }
          }
        }
      }
    }
  }
  
  // 论文信息卡片
  .paper-info-card, .paper-conclusion-card {
    height: 600px;
    
    .paper-list, .conclusion-list {
      height: 500px;
      overflow-y: auto;
      
      .paper-item, .conclusion-item {
        padding: 15px;
        margin-bottom: 15px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        
        h4 {
          margin-top: 0;
          margin-bottom: 10px;
          color: #303133;
        }
        
        p {
          margin: 5px 0;
          color: #606266;
          font-size: 14px;
          
          i {
            margin-right: 5px;
            color: #909399;
          }
        }
        
        .conclusion-content {
          margin: 10px 0;
          padding: 10px;
          background-color: #f9f9f9;
          border-radius: 4px;
          color: #606266;
          line-height: 1.6;
        }
        
        .paper-actions, .conclusion-actions {
          margin-top: 10px;
          text-align: right;
        }
      }
    }
    
    .empty-data {
      text-align: center;
      padding: 40px 0;
      color: #909399;
      
      i {
        font-size: 48px;
        margin-bottom: 15px;
        display: block;
      }
      
      p {
        margin-bottom: 15px;
      }
    }
  }
}

// 动画定义
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(103, 194, 58, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(103, 194, 58, 0);
  }
}
</style>